Component({
  properties: {
    visible: { 
      type: Boolean, 
      value: false 
    },
    top: { 
      type: Number, 
      value: 0 
    },
    value: { 
      type: [Number, String], 
      value: null 
    }, // 当前选中的选项ID，用于回显
    options: {
      type: Array,
      value: []
    } // 选项列表，格式: [{ id: 1, name: '选项1' }, ...]
  },
  observers: {
    'top': function(top) {
      // 当top变化时，更新panelBottom（需要等待panel渲染后获取实际高度）
      if (this.properties.visible) {
        this._updatePanelBottom();
      }
    },
    'visible': function(visible) {
      const prevVisible = this.data._prevVisible;
      this.setData({ _prevVisible: visible });
      
      if (visible) {
        // 组件打开时，先重置动画状态（确保初始状态）
        this.setData({
          animating: false
        });
        
        // 执行回显
        this._updateDisplayFromValue();
        
        // 先使用估算值设置 panelBottom，确保 mask 从一开始就正确覆盖
        const top = this.properties.top || 0;
        const options = this.properties.options || [];
        const optionCount = options.length + 1; // +1 是"不限"选项
        const systemInfo = wx.getSystemInfoSync();
        const maxHeight = systemInfo.windowHeight * 0.5; // 最大50vh
        const estimatedHeight = Math.min(optionCount * 44 + 8, maxHeight); // 每个选项44px，最大50vh
        this.setData({
          panelBottom: top + estimatedHeight
        });
        
        // 延迟更新panelBottom和启动动画，等待DOM渲染完成
        // 使用 requestAnimationFrame 或 setTimeout 确保DOM已渲染
        setTimeout(() => {
          // 精确计算 panelBottom
          this._updatePanelBottom();
          // 启动出现动画（下滑渐入）
          this.setData({
            animating: true
          });
        }, 16); // 约一帧的时间，让动画更流畅
      } else {
        // 关闭时立即重置动画状态（无动画直接消失）
        // 先移除动画类，让组件立即回到初始状态
        this.setData({
          animating: false
        });
      }
    },
    'value': function(value) {
      // 当value变化时，更新显示
      if (this.properties.visible) {
        this._updateDisplayFromValue();
      }
    },
    'options': function(options) {
      // 当选项列表变化时，如果组件已打开，重新执行回显并更新高度
      if (this.properties.visible && options && options.length > 0) {
        this._updateDisplayFromValue();
        // 延迟更新panelBottom，等待DOM渲染完成
        setTimeout(() => {
          this._updatePanelBottom();
        }, 50);
      }
    }
  },
  data: {
    panelBottom: 0, // panel下沿位置，自适应计算
    selectedOption: null, // 当前选中的选项ID（内部状态）
    animating: false, // 动画状态，控制出现动画
    _prevVisible: false // 记录上一次的visible状态
  },
  methods: {
    /**
     * 更新panelBottom，使mask自适应panel高度
     */
    _updatePanelBottom: function() {
      const that = this;
      const top = this.properties.top || 0;
      
      // 获取panel的实际高度
      wx.createSelectorQuery()
        .in(this)
        .select('.simple-dropdown-panel')
        .boundingClientRect()
        .exec(function (res) {
          const rect = res && res[0];
          if (rect && rect.height) {
            // panelBottom = top + panel实际高度
            that.setData({
              panelBottom: top + rect.height
            });
          } else {
            // 如果获取失败，使用默认值（基于选项数量估算）
            const options = that.properties.options || [];
            const optionCount = options.length + 1; // +1 是"不限"选项
            const systemInfo = wx.getSystemInfoSync();
            const maxHeight = systemInfo.windowHeight * 0.5; // 最大50vh
            const estimatedHeight = Math.min(optionCount * 44 + 8, maxHeight); // 每个选项44px，最大50vh
            that.setData({
              panelBottom: top + estimatedHeight
            });
          }
        });
    },
    
    /**
     * 根据value更新显示状态（回显）
     */
    _updateDisplayFromValue: function() {
      const value = this.properties.value;
      const options = this.properties.options || [];
      
      // 如果value为null、undefined或空字符串，重置选中状态
      if (!value || value === null || value === undefined || value === '') {
        this.setData({
          selectedOption: null
        });
        return;
      }
      
      // 将value转换为字符串用于比较
      const valueStr = String(value);
      
      // 在选项中查找匹配的项
      const foundOption = options.find(option => {
        if (!option) return false;
        return String(option.id) === valueStr;
      });
      
      if (foundOption) {
        // 找到匹配的选项，设置选中状态
        this.setData({
          selectedOption: foundOption.id
        });
        console.log('SimpleDropdown: 回显成功，选项ID:', foundOption.id, '选项名称:', foundOption.name);
      } else {
        // 如果没找到匹配的选项，重置选中状态
        console.warn('SimpleDropdown: 未找到匹配的选项，value:', value);
        this.setData({
          selectedOption: null
        });
      }
    },
    
    /**
     * 点击选项
     */
    onOptionTap: function(e) {
      const optionId = e.currentTarget.dataset.id;
      const optionName = e.currentTarget.dataset.name;
      
      this.setData({
        selectedOption: optionId
      });
      
      // 触发change事件，通知父组件
      this.triggerEvent('change', {
        value: optionId,
        name: optionName
      });
    },
    
    /**
     * 点击"不限"选项
     */
    onResetOptionTap: function() {
      this.setData({
        selectedOption: null
      });
      
      // 触发change事件，通知父组件（value为null表示重置）
      this.triggerEvent('change', {
        value: null,
        name: '不限'
      });
    },
    
    /**
     * 点击mask关闭弹窗
     */
    onMaskTap: function() {
      this.triggerEvent('close');
    }
  }
});

